<template>
    <div style="margin-bottom:20px">
        <!-- 卡片组件展示 -->
        <!-- 响应式 -->
        <n-grid :y-gap="8" :x-gap="12" cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen">
            <n-gi>
                <n-card
                    hoverable
                    title="访问量"
                    :segmented="{
                        content: 'hard',
                        footer: 'footer'
                    }"
                >
                    <template #header-extra>
                        <n-tag type="success">日</n-tag>
                    </template>

                    <div>
                        <!-- <span class="text-3xl">{{ accessNum }}</span> -->
                        <n-statistic >
                            <n-number-animation
                                :from="0"
                                :to="accessNum"
                                :duration="1000"
                                show-separator

                            />
                        </n-statistic>
                    </div>
                    <div class="my-card-line">
                        <span>
                            日同比：
                            <n-badge :value="aaa" />
                            <n-icon>
                                <ArrowUp style="color:#d03050" />
                            </n-icon>
                        </span>
                        <span>
                            周同比：
                            <n-badge type="success" :value="aaa" />
                            <n-icon>
                                <ArrowDown style="color:#18a058" />
                            </n-icon>
                        </span>
                    </div>
                    <!-- <template #footer>#footer</template> -->
                </n-card>
            </n-gi>
            <n-gi>
                <n-card
                    hoverable
                    title="在线用户"
                    :segmented="{
                        content: 'hard',
                        footer: 'footer'
                    }"
                >
                    <template #header-extra>
                        <n-tag type="info">周</n-tag>
                    </template>
                    <div>
                        <!-- <span class="text-3xl">{{ userNum }}</span> -->
                        <n-statistic >
                            <n-number-animation
                                :from="0"
                                :to="userNum"
                                :duration="1000"
                                show-separator

                            />
                        </n-statistic>
                    </div>
                    <div class="my-card-line">
                        <span>
                            日同比：
                            <n-badge :value="aaa" />
                            <n-icon>
                                <ArrowUp style="color:#d03050" />
                            </n-icon>
                        </span>
                        <span>
                            周同比：
                            <n-badge type="success" :value="aaa" />
                            <n-icon>
                                <ArrowDown style="color:#18a058" />
                            </n-icon>
                        </span>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card
                    hoverable
                    title="在线资产"
                    :segmented="{
                        content: 'hard',
                        footer: 'footer'
                    }"
                >
                    <template #header-extra>
                        <n-tag type="warning">月</n-tag>
                    </template>
                    <div>
                        <!-- <span class="text-3xl">{{ devNum }}</span> -->
                            <n-statistic >
                            <n-number-animation
                                :from="0"
                                :to="devNum"
                                :duration="1000"
                                show-separator

                            />
                        </n-statistic>
                    </div>
                    <div class="my-card-line">
                        <span>
                            日同比：
                            <n-badge :value="aaa" />
                            <n-icon>
                                <ArrowUp style="color:#d03050" />
                            </n-icon>
                        </span>
                        <span>
                            周同比：
                            <n-badge type="success" :value="aaa" />
                            <n-icon>
                                <ArrowDown style="color:#18a058" />
                            </n-icon>
                        </span>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card
                    hoverable
                    title="授权数"
                    :segmented="{
                        content: 'hard',
                        footer: 'footer'
                    }"
                >
                    <template #header-extra>
                        <n-tag type="error">年</n-tag>
                    </template>
                    <div>
                        <!-- <span class="text-3xl">{{ licenseNum }}</span> -->
                         <n-statistic >
                            <n-number-animation
                                :from="0"
                                :to="licenseNum"
                                :duration="1000"
                                show-separator

                            />
                        </n-statistic>
                    </div>
                    <div class="my-card-line">
                        <span>
                            日同比：
                            <n-badge :value="aaa" />
                            <n-icon>
                                <ArrowUp style="color:#d03050" />
                            </n-icon>
                        </span>
                        <span>
                            周同比：
                            <n-badge type="success" :value="aaa" />
                            <n-icon>
                                <ArrowDown style="color:#18a058" />
                            </n-icon>
                        </span>
                    </div>
                </n-card>
            </n-gi>
        </n-grid>

        <n-grid
            :y-gap="8"
            :x-gap="12"
            cols="1 s:1 m:1 l:2 xl:2 2xl:2"
            responsive="screen"
            style="margin-top:10px"
        >
            <n-gi>
                <n-card
                    hoverable
                    title="用户访问top10"
                    header-style="height:50px;font-size:16px"
                    :segmented="{
                        content: 'hard',
                    }"
                >
                    <div ref="userBar" style="height:350px"></div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card
                    hoverable
                    title="资产访问top10"
                    header-style="height:50px;font-size:16px"
                    :segmented="{
                        content: 'hard',
                    }"
                >
                    <div ref="devBar" style="height:350px"></div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card
                    hoverable
                    title="一周访问趋势"
                    header-style="height:50px;font-size:16px"
                    :segmented="{
                        content: 'hard',
                    }"
                >
                    <div ref="weekBar" style="height:350px"></div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card
                    hoverable
                    title="各类资产占比"
                    header-style="height:50px;font-size:16px"
                    :segmented="{
                        content: 'hard',
                    }"
                >
                    <div ref="typeBar" style="height:350px"></div>
                </n-card>
            </n-gi>
        </n-grid>

        <n-grid
            :y-gap="8"
            :x-gap="12"
            cols="1 s:1 m:1 l:1 xl:1 2xl:1"
            responsive="screen"
            style="margin-top:10px"
        >
            <n-gi>
                <n-card
                    hoverable
                    title="今日流量趋势"
                    header-style="height:50px;font-size:16px"
                    :segmented="{
                        content: 'hard',
                    }"
                >
                    <div ref="dayBar" style="height:350px"></div>
                </n-card>
            </n-gi>
        </n-grid>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import numToString from '../../net/numberFromat'
import { ArrowUp, ArrowDown } from '@vicons/ionicons5'

// 图表
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent, VisualMapComponent, TitleComponent } from 'echarts/components';
import { BarChart, PieChart, LineChart } from 'echarts/charts';
import { SVGRenderer } from 'echarts/renderers';



const accessNum = ref(12345678)
const userNum = ref(1235)
const devNum = ref(8135)
const licenseNum = ref(9999)

const userBar = ref(null)
const devBar = ref(null)
const typeBar = ref(null)
const weekBar = ref(null)
const dayBar = ref(null)


const aaa = ref('123%')



onMounted(() => {

    echarts.use([GridComponent, BarChart, SVGRenderer, TooltipComponent, LegendComponent, PieChart, VisualMapComponent, TitleComponent, LineChart]);

    // var chartDom = document.getElementById('main');
    // 用户top10
    let userChart = echarts.init(userBar.value);
    let optionUser = {
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['admin', '某君', 'more', 'test', 'audit', 'aaa', 'test', 'test', 'test', 'test']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130, 76, 132, 81],
                type: 'bar',
                barWidth: '60%',
                // color:'#2d8cf0'
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(59, 130, 246, 1)'  // 0% 处的颜色
                    },
                    {
                        offset: 0.8, color: 'rgba(59, 130, 246, 1)'// 0% 处的颜色
                    },
                    {
                        offset: 1, color: 'rgba(59, 130, 246, .5)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        ]
    };



    optionUser && userChart.setOption(optionUser)




    //   资产top10

    let devChart = echarts.init(devBar.value);
    let optionDev = {
        grid: {
            left: '5%',
            right: '8%',
            bottom: 0,
            top: 0,
            containLabel: true
        },
        yAxis: {
            offset: 20,
            type: 'category',
            show: 'false',
            data: ['test', 'test', 'test', 'test', '核心路由', '数据库', '防火墙', 'linux', '跳板机', '出口防火墙']
        },
        xAxis: {
            type: 'value',
            show: 'false',
            splitLine: 'false',
        },
        series: [
            {
                data: [10, 20, 30, 40, 50, 60, 70, 80, 90, {
                    value: 100,
                    itemStyle: {
                        color: '#a90000'
                    }
                },],
                type: 'bar',
                barWidth: '35%',
                backgroundStyle: {
                    borderRadius: [30, 30, 30, 30],
                },
                color: '#2d8cf0'
            }
        ]


    }

    let option1 = {
        dataset: {
            source: [
                ['amount', 'product'],
                [58212, 'Matcha Latte'],
                [78254, 'Milk Tea'],
                [41032, 'Cheese Cocoa'],
                [12755, 'Cheese Brownie'],
                [20145, 'Matcha Cocoa'],
                [79146, 'Tea'],
                [91852, 'Orange Juice'],
                [101852, 'Lemon Juice'],
                [320112, 'Walnut Brownie']
            ]
        },
        grid: {

            containLabel: true
        },
        xAxis: { name: 'amount', type: 'value' },
        yAxis: { type: 'category' },
        visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['高分', '低分'],
            // Map the score column to color
            dimension: 0,
            inRange: {
                color: ['#2080f0', '#f0a020', '#d03050']
            }
        },
        series: [
            {
                type: 'bar',
                encode: {
                    x: 'amount',
                    y: 'product'
                }
            }
        ]
    };

    // option1 && devChart.setOption(option1)
    optionDev && devChart.setOption(optionDev)


    // 随便丢一个折线图
    let myChart = echarts.init(weekBar.value);
    let option;

    option = {
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }
        ]
    };

    option && myChart.setOption(option);



    // 各类资产占比
    let TypeChart = echarts.init(typeBar.value);
    let optionType = {
        title: {
            text: '各类资产占比',
            subtext: '全部资产类型比例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '各类资产占比',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '主机' },
                    { value: 735, name: '网络' },
                    { value: 580, name: '数据库' },
                    { value: 484, name: 'B/S' },
                    { value: 300, name: 'C/S' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    optionType && TypeChart.setOption(optionType)






    // 今日流量趋势
    let dayChart = echarts.init(dayBar.value);
    let optionDay = {
        grid: {
            left: '1%',
            right: '2%',
            bottom: 0,
            top: '4%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [80, 30, 20, 0, 0, 158, 382, 568, 932, 901, 934, 1090, 1530, 1020, 820, 932, 901, 934, 1090, 1330, 924, 823, 726, 100],
                type: 'line',
                areaStyle: {},
                smooth: true
            }
        ]
    };

    optionDay && dayChart.setOption(optionDay);





    window.onresize = function () {
        userChart.resize()
        devChart.resize()
        TypeChart.resize()
        dayChart.resize()
        myChart.resize()
    }
})





</script>

<style scoped>
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.n-statistic-value__content {
    font-size: 1.875rem;
}
.my-card-line {
    margin-top: 10px;
    padding: 0.25rem;
    justify-content: space-between;
    display: flex;
}
</style>